import yzService from "components/ui_components/yz_service.vue";
import yzGoodsposter from "components/ui_components/yz_goodsPoster";
import { Toast } from "vant";
export default {
  data() {
    return {
      bubbleData: [],
      onlineShow: false,
      posterShow: false,
      posterImg: "",
      timer: null,
      isMoreNum: false
    };
  },
  props: {
    homeIsShow: {
      type: Boolean,
      default: false
    },
    goodsIsShow: {
      type: Boolean,
      default: true
    },
    allDataList: {
      type: null,
      default: {}
    },
    activeIndex: {
      type: null,
      default: 0
    }
  },
  watch: {
    activeIndex(newVal,oldVal) {
      if(!this.homeIsShow) {
        this.$nextTick(() => {
          clearInterval(this.timer);
          this.bubbleData = [];
          this.initScatter();
        })
      }
    }
  },
  components: { yzService , yzGoodsposter },
  activated() {
    this.posterShow = false;
    clearInterval(this.timer);
    this.bubbleData = [];
    this.initScatter()
  },
  mounted() {
    document.addEventListener('visibilitychange', this.handleVisiable)  
    clearInterval(this.timer);
    this.initScatter();
  },
  methods: {
    handleVisiable(e) {  
      switch(e.target.visibilityState) {
        case 'prerender':
          // console.log('网页预渲染，内容不可见')
          break;
        case 'hidden':
          // console.log('内容不可见，处理后台、最小化、锁屏状态')
          if(!this.isMoreNum) {
            clearInterval(this.timer);
            this.bubbleData = [];
          }
          break;
        case 'visible':
          // console.log('处于正常打开')
          if(!this.isMoreNum) {
            clearInterval(this.timer);
            this.bubbleData = [];
            this.initScatter();
          }
          break;
      }
    },
    // 初始化气泡图
    initScatter() {
      let bubbleData = this.allDataList.list[this.activeIndex] ? this.allDataList.list[this.activeIndex].goods : [];
      let offsets = [7.5,11.13,5.5,14.5,8.5];
      bubbleData.forEach((v, i) => {
        v.top = 1.3 + "rem";
        v.left = offsets[i % 5] + "rem" ;
        v.width = 3.8;
        //气泡的动画时长
        v.time = 5;
      });
      this.isMoreNum = bubbleData.length < 5 ? true :false
      let index = 0;
      this.timer = setInterval(() => {
        if(this.isMoreNum && index >= bubbleData.length) {
          index = 0;
          clearInterval(this.timer);
          return
        }else if (index >= bubbleData.length) {
          index = 0;
        }

        this.bubbleData.push(bubbleData[index]);
        ++index
      }, 1000)
    },
    clickCheck() {
      this.$router.push(this.fun.getUrl('blindPool',{ id: this.allDataList.list[this.activeIndex].id }));
    },
    clickService() {
      this.onlineShow = true;
    },
    // 跳转去我的盲盒
    goToMyBindBox() {
      this.$router.push(this.fun.getUrl('orderlist',{ status: '0', orderType: 'newBindBox' },{title: '我的盲盒'}));
    },
    // 生成海报
    postShow() {
      let toastPoster = Toast({
        duration: -1, // 持续展示 toast
        message: "正在为您生成海报中"
      });
      $http
        .get("plugin.new-blind-box.frontend.index.poster", { id : this.allDataList.list[this.activeIndex].id }, "")
        .then(response => {
          toastPoster.clear();
          if (response.result == 1) {
            this.posterImg = `${response.data.poster}?${Date.now()}`;
            this.posterShow = true;
          } else {
            this.posterShow = false;
            this.$dialog.alert({ message: response.msg });
          }
        })
        .catch(error => {
          // toastPoster.clear();
          console.log(error);
        });
    },
    // 跳转到首页
    goHomePage() {
      this.$router.push(this.fun.getUrl('newBlindBox',{id: this.allDataList.list[this.activeIndex].id},{}));
    },
  },
};
